<template>
  <div class="loginpage">
    <!-- <div class="site-content__wrapper"> -->
      <a-layout>
        <!-- header -->
        <a-layout-header>Header</a-layout-header>

        <!-- content -->  
        <a-layout-content class="banner">
          <a-row class="box">
            <a-col :span="12" class="brand-info">
              <h2 class="brand-info__text">Back-stage management</h2>
              <p class="brand-info__intro"></p>
            </a-col>
            <a-col :span="12" class="login-main">
              <h3 class="login-title">Lead Manager</h3>
              <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
                <el-form-item prop="loginname">
                  <el-input v-model="dataForm.loginname" placeholder="Email"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input v-model="dataForm.password" type="password" placeholder="Password"></el-input>
                </el-form-item>
                <el-form-item prop="captcha">
                  <el-row :gutter="20">
                    <el-col :span="14">
                      <el-input v-model="dataForm.captcha" placeholder="Captcha">
                      </el-input>
                    </el-col>
                    <el-col :span="10" class="login-captcha">
                      <img :src="captchaPath" @click="getCaptcha()" alt="">
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">Log In</el-button>
                </el-form-item>
              </el-form>
            </a-col>
          </a-row>
        </a-layout-content>

        <!-- footer -->
        <a-layout-footer>Footer</a-layout-footer>
      </a-layout>

      <!-- <div class="site-content">
        <div class="brand-info">
          <h2 class="brand-info__text">Back-stage management</h2>
          <p class="brand-info__intro"></p>
        </div>
        <div class="login-main">
          <h3 class="login-title">Lead Manager</h3>
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="loginname">
              <el-input v-model="dataForm.loginname" placeholder="Email"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" placeholder="Password"></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="Captcha">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()" alt="">
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">Log In</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div> -->
    
    <!-- </div> -->
  </div>
</template>

<script>
  import { getUUID } from '@/utils'
  export default {
    data () {
      return {
        dataForm: {
          loginname: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        dataRule: {
          loginname: [
            { required: true, message: 'Account cannot be empty', trigger: 'blur' }
            // 帐号不能为空
          ],
          password: [
            { required: true, message: 'Password cannot be empty', trigger: 'blur' }
            // 密码不能为空
          ],
          captcha: [
            { required: true, message: 'Verification code cannot be empty', trigger: 'blur' }
            // 验证码不能为空
          ]
        },
        captchaPath: ''
      }
    },
    created () {
      this.getCaptcha()
    },
    methods: {
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData({
                'loginname': this.dataForm.loginname,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'captcha': this.dataForm.captcha
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$cookie.set('token', data.token)
                this.$router.replace({ name: 'home' })
              } else {
                this.getCaptcha()
                _this.$message.error(data.msg, 1)
              }
            })
          }
        })
      },
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
      }
    }
  }
</script>

<style lang="less">
  // header
  .header {
    height: 100px;
    // background: #ccc;
  }

  // content
  .banner {
    .box {
      width: 100%;
      height: 500px;
    }
  }

  // content
  // .site-wrapper.site-page--login {
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   left: 0;
  //   // background-color: rgba(38, 50, 56, .6);
  //   overflow: hidden;
  //   // &:before {
  //   //   position: fixed;
  //   //   top: 0;
  //   //   left: 0;
  //   //   z-index: -1;
  //   //   width: 100%;
  //   //   height: 100%;
  //   //   content: "";
  //   //   background-image: url(~@/assets/img/login_bg.jpg);
  //   //   background-size: cover;
  //   // }
  //   .site-content__wrapper {
  //     position: absolute;
  //     top: 0;
  //     right: 0;
  //     bottom: 0;
  //     left: 0;
  //     padding: 0;
  //     margin: 0;
  //     overflow-x: hidden;
  //     overflow-y: auto;
  //     background-color: transparent;
  //   }
  //   .site-content {
  //     min-height: 100%;
  //     padding: 30px 500px 30px 30px;
  //   }
  //   .brand-info {
  //     margin: 220px 100px 0 90px;
  //     color: #fff;
  //   }
  //   .brand-info__text {
  //     margin:  0 0 22px 0;
  //     font-size: 48px;
  //     font-weight: 400;
  //     text-transform : uppercase;
  //   }
  //   .brand-info__intro {
  //     margin: 10px 0;
  //     font-size: 16px;
  //     line-height: 1.58;
  //     opacity: .6;
  //   }
  //   .login-main {
  //     position: absolute;
  //     top: 0;
  //     right: 0;
  //     padding: 150px 60px 180px;
  //     width: 470px;
  //     min-height: 100%;
  //     background-color: #fff;
  //   }
  //   .login-title {
  //     font-size: 16px;
  //   }
  //   .login-captcha {
  //     overflow: hidden;
  //     > img {
  //       width: 100%;
  //       cursor: pointer;
  //     }
  //   }
  //   .login-btn-submit {
  //     width: 100%;
  //     margin-top: 38px;
  //   }
  // }
</style>
